<template>
  <form action="/">
      <van-field
          v-model="addTagText"
          center
          clearable
          label="输入添加"
          placeholder="请输入想添加的标签"
      >
        <template #button>
          <van-button type="success" @click="onAdd">添加</van-button>
        </template>
      </van-field>
  </form>
  <van-divider>
    <van-highlight :keywords="keywordsOne"
                   :source-string="textOne"
                   v-if="activeIds.length !== 0"
                   id="keywordsSelectedTagsFontSize"/>
  </van-divider>
  <div v-if="activeIds.length === 0" id="selectTags">丰富标签从而找到更多伙伴</div>
  <van-row gutter="10" style="padding: 8px">
    <van-col v-for="tag in activeIds">
      <van-tag closeable size="medium" type="primary" @close="doClose(tag)">
        {{ tag }}
      </van-tag>
    </van-col>
  </van-row>
  <van-divider>
    <van-highlight :keywords="keywordsTwo" :source-string="textTwo" id="keywordsSelectTagsFontSize"/>
  </van-divider>
  <van-tree-select
      v-model:active-id="activeIds"
      v-model:main-active-index="activeIndex"
      :items="tagList"
  />
  <div style="padding: 12px" id="initTagsTwoButton">
    <van-button round block type="primary" @click="cancelInitTagsTeam">
      取消
    </van-button>
    <van-button round block type="primary" @click="doInitMyTag">
      提交初始标签
    </van-button>
  </div>
</template>


<script setup lang="ts">

import { ref } from 'vue';
import {useRouter} from "vue-router";
import {showFailToast, showSuccessToast, showToast} from "vant";
import MyAxios from "../plugins/myAxios.ts";

const addTagText = ref('');

const router = useRouter();
const textOne = '已选标签';
const textTwo = '推荐以下标签'
const keywordsOne = '已选标签';
const keywordsTwo = '推荐以下标签';

//已选中的标签
const activeIds = ref([]);//默认不选中
const activeIndex = ref(0);

//判断是否已经添加某个标签
let flag = null;

//推荐标签列表
const originTagList = [
  {
    text: '性别',
    children: [
      { text: '男', id: '男' },
      { text: '女', id: '女' },
    ],
  },
  {
    text: '年级',
    children: [
      { text: '初一', id: '初一' },
      { text: '初二', id: '初二' },
      { text: '初三', id: '初三' },
      { text: '高一', id: '高一' },
      { text: '高二', id: '高二' },
      { text: '高三', id: '高三' },
      { text: '高四', id: '高四' },
      { text: '大一', id: '大一' },
      { text: '大二', id: '大二' },
      { text: '大三', id: '大三' },
      { text: '大四', id: '大四' },
      { text: '研究生', id: '研究生' },
      { text: '博士生', id: '博士生' },
    ],
  },
  {
    text: '最近在学',
    children: [
      { text: 'Python', id: 'Python' },
      { text: 'C++', id: 'C++' },
      { text: 'Java', id: 'Java' },
      { text: 'C', id: 'C' },
      { text: 'C#', id: 'C#' },
      { text: 'JavaScript', id: 'JavaScript' },
      { text: 'Go', id: 'Go' },
      { text: 'SQL', id: 'SQL' },
      { text: 'Visual Basic', id: 'Visual Basic' },
      { text: 'Fortran', id: 'Fortran' },
      { text: 'Delphi/Object Pascal', id: 'Delphi/Object Pascal' },
      { text: 'PHP', id: 'PHP' },
      { text: 'Scratch', id: 'Scratch' },
      { text: 'Rust', id: 'Rust' },
      { text: 'MATLAB', id: 'MATLAB' },
      { text: 'R', id: 'R' },
      { text: 'Assembly Language', id: 'Assembly Language' },
      { text: 'Ruby', id: 'Ruby' },
      { text: 'COBOL', id: 'COBOL' },
      { text: 'Swift', id: 'Swift' },
    ],
  },
  {
    text: '目标',
    children: [
      { text: '考研', id: '考研' },
      { text: '考公', id: '考公' },
      { text: '入伍', id: '入伍' },
      { text: '春招', id: '春招' },
      { text: '秋招', id: '秋招' },
      { text: '社招', id: '社招' },
      { text: '竞赛', id: '竞赛' },
      { text: '转行中', id: '转行中' },
      { text: '跳槽', id: '跳槽' },
    ],
  },
  {
    text: '兴趣',
    children: [
      { text: '编程', id: '编程' },
      { text: '羽毛球', id: '羽毛球' },
      { text: '篮球', id: '篮球' },
      { text: '足球', id: '足球' },
      { text: '乒乓球', id: '乒乓球' },
      { text: '阅读', id: '阅读' },
      { text: '唱歌', id: '唱歌' },
      { text: '舞蹈', id: '舞蹈' },
      { text: '跑步', id: '跑步' },
      { text: '健身', id: '健身' },
      { text: '象棋', id: '象棋' },
      { text: '围棋', id: '围棋' },
      { text: '绘画', id: '绘画' },
      { text: '书法', id: '书法' },
      { text: '朗诵', id: '朗诵' },
    ],
  },
  {
    text: '状态',
    children: [
      { text: '乐观', id: '乐观' },
      { text: '悲伤', id: '悲伤' },
      { text: '佛系', id: '佛系' },
      { text: '待业', id: '待业' },
      { text: '已就业', id: '已就业' },
      { text: '找工作中', id: '找工作中' },
      { text: '单身', id: '单身' },
      { text: '恋爱中', id: '恋爱中' },
      { text: '已婚', id: '已婚' },
      { text: '有点丧', id: '有点丧' },
      { text: '摆烂', id: '摆烂' },
    ],
  },
]

//标签列表(响应式数组)
let tagList = ref(originTagList);

//删除标签
const doClose = (tag) => {
  activeIds.value = activeIds.value.filter(item => {
    return item !== tag;
  })
}

/**
 * 输入文本添加标签
 */
const onAdd = () => {
  flag = activeIds.value.filter(item => {
    return item === addTagText.value;
  })
  if(flag.length !== 0) {
    showToast('请勿添加重复标签');
    addTagText.value = '';
    flag = null;
    return;
  }
  activeIds.value.push(addTagText.value);
  addTagText.value = '';
};

/**
 * 初始我的标签
 */
const doInitMyTag = async () => {
  const res = await MyAxios.post('/user/tag/update', activeIds.value);
  if(res.code === 0) {
    showSuccessToast('初始标签成功');
    router.back();
  } else {
    showFailToast('初始标签失败');
  }
}

/**
 * 取消初始标签操作
 */
const cancelInitTagsTeam = () => {
  showToast('取消初始标签')
  router.back();
}

</script>


<style scoped>
/*设置透明度*/
#selectTags {
  opacity: 36%;
  font-size: 14px;
}
#keywordsSelectedTagsFontSize {
  font-size: 16px;
}
#keywordsSelectTagsFontSize {
  font-size: 16px;
}
#initTagsTwoButton {
  display: flex;
  justify-content: center;
}
</style>